<%+cbi/valueheader%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
    #mask-box {
        z-index: 1000;
        display: flex;
        position: absolute;
        text-align: center;
        background: rgba(255, 255, 255, .8);
    }
    #mask-box #code-box {
        color: #000000;
        width: 288px;
        height: 325px;
        border: 1px solid #585858;
        padding: 15px;
        position: absolute;
        box-shadow: 0px 0px 7px 3px rgb(0 0 0 / 20%);
        background: #fff url('') no-repeat center center;
        border-radius: 4px;
    }
    #mask-box #code-box img {
        margin-top: 5px;
    }
    #mask-box #close-link {
        float: right;
        width: 32px;
        height: 32px;
        margin: -32px;
        cursor: pointer;
        overflow: hidden;
        background: url('') no-repeat center center;
    }
    #mask-box #load-link {
        color: #fbfbfb;
        left: 0;
        right: 0;
        margin: 0 10px;
        bottom: 115px;
        cursor: pointer; 
        display: block;
        position: absolute;
        background: #e4393c;
        line-height: 48px;
        text-decoration: none;
    }
    div[id$="-html"] {
        display: none;
    }
</style>

<script type="text/javascript">
(function( window, document, undefined ) {
    // 选取 DOM 元素
    var selector, section = document.querySelector("[id$='refresh_token']");

    // 遮罩容器
    var mask = document.createElement('div');
    mask.id = 'mask-box';

    // 二维码容器
    var code = document.createElement('div');
    code.id = 'code-box';
    code.innerHTML = "请使用 阿里云盘 App 进行扫码认证";

    // 刷新按钮
    var load = document.createElement('a');
    load.id = 'load-link';
    load.innerHTML = "刷新";

    // 创建二维码
    var make = new QRCode( code, { correctLevel: QRCode.CorrectLevel.L });
    make.clear = function() {
        code.getElementsByTagName("img").item(0).removeAttribute('src');
        this._oDrawing.clear();
    }

    // 关闭按钮
    var link = document.createElement('a');
    link.id = 'close-link';
    link.addEventListener('click', ( e ) => {
        XHR.halt();
        XHR._q = [];
        mask.remove();
        return false;
    });

    // 二维码层居中
    var center = function() {
        // 调整遮罩层覆盖范围
        mask.style.width = section.clientWidth + "px";
        mask.style.height = section.clientHeight + "px";
        // 二维码层居中
        var top = selector.offsetTop - selector.parentNode.offsetTop;
        if ( selector.offsetTop <= 380 ) {
            code.style.top = top + selector.offsetHeight + "px";
        } else {
            code.style.top = top - code.offsetHeight + "px";
        }
        code.style.left = ( ( section.offsetWidth - code.offsetWidth ) / 2 ) + parseInt( ( selector.currentStyle || window.getComputedStyle( selector ) ).marginLeft ) + "px";
    };

    // 获取二维码
    var feedback = function() {
        // 清除二维码
        make.clear();
        // 获取通信数据
        XHR.get( '<%=luci.dispatcher.build_url("admin", "services", "aliyundrive-webdav","qrcode")%>', null, ( x, d ) => {
            if ( x.status != 200 ) {
                alert('获取二维码失败!');
                return false;
            }
            // 移除刷新
            load.remove();
            // 创建二维码
            make.makeCode("https://www.aliyundrive.com/o/oauth/authorize?sid=" + d.sid);
            // 监听扫码反馈
            XHR.poll( 3, '<%=luci.dispatcher.build_url("admin", "services", "aliyundrive-webdav", "query")%>', { sid: d.sid }, ( x, d ) => {
                if ( d.refresh_token.trim() ) {
                    // 清除线程
                    XHR.halt();
                    XHR._q = [];
                    // 回写 Cookie 数据
                    mask.remove();
                    selector.value = d.refresh_token.trim();
                }
            });
        });
    };

    // 鼠标事件
    var event = function( e ) {
        // 区分单击、双击事件
        if ( e.target.tagName == "INPUT" && e.type == "dblclick" ) {
            selector = e.target;
        } else if ( e.target.tagName == "IMG" && e.type == "click" && /add/ig.test( e.target.src ) ) {
            selector = section.getElementsByTagName("INPUT");
            selector = selector.item( selector.length - 1 );
        } else {
            return false;
        }
        // 插入容器
        if ( !document.contains( mask ) ) {
            section.prepend( mask );
            mask.prepend( code );
            code.prepend( link );
            center();
        }
        // 获取及监听扫码事件
        feedback();
    };

    // 绑定事件
    section.addEventListener( 'click', event );
    section.addEventListener( 'dblclick', event );
})( window, document );
</script>
<%+cbi/valuefooter%>
